<script setup>
import { creatschedule } from '../store/scheduleStore.js'
import { createuser } from '../store/userStore.js'
let sysUser = createuser()
let schedule = creatschedule();
import { reactive, ref, onMounted } from 'vue'
import instance from '../utils/request.js'

onMounted(() => {
    findAll();
})
async function findAll() {
    let { data } = await instance.get("/syschdeule/findAll", { params: { "uid": sysUser.uid } });
    schedule.itemList = data.data.itemList;
}
async function addItem() {
    let { data } = await instance.get("/syschdeule/add", { params: { "uid": sysUser.uid } });
    if (data.code == 200) {
        findAll();
    } else {
        alert("新增失败");
    }
}

async function updateItem(index) {
    let { data } = await instance.post("/syschdeule/update", schedule.itemList[index]);
    if (data.code == 200) {
        findAll();
    } else {
        alert("更新失败");
    }
}
async function deleteItem(index) {
    let sid = schedule.itemList[index].sid;
    let { data } = await instance.get("/syschdeule/remove", { params: { "sid": sid } });
    if (data.code == 200) {
        findAll();
    } else {
        alert("删除失败");
    }
}
</script>

<template>
    <div>
        <h3 class="ht">您的日程如下</h3>
        <table class="tab" cellspacing="0px">
            <thead>
                <tr class="ltr">
                    <th>编号</th>
                    <th>内容</th>
                    <th>进度</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr class="ltr" v-for="(item, index) in schedule.itemList" :key="index">
                    <td v-text="index + 1">
                    </td>
                    <td>
                        <input type="input" v-model="item.title">
                    </td>
                    <td>
                        <input type="radio" value="1" v-model="item.completed"> 已完成
                        <input type="radio" value="0" v-model="item.completed"> 未完成
                    </td>
                    <td class="buttonContainer">
                        <button class="btn1" @click="deleteItem(index)">删除</button>
                        <button class="btn1" @click="updateItem(index)">保存修改</button>
                    </td>
                </tr>
                <tr class="ltr buttonContainer">
                    <td colspan="4">
                        <button class="btn1" @click="addItem()">新增日程</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style scoped>
.ht {
    text-align: center;
    color: cadetblue;
    font-family: 幼圆;
}

.tab {
    width: 80%;
    border: 5px solid cadetblue;
    margin: 0px auto;
    border-radius: 5px;
    font-family: 幼圆;
}

.ltr td {
    border: 1px solid powderblue;

}

.ipt {
    border: 0px;
    width: 50%;

}

.btn1 {
    border: 2px solid powderblue;
    border-radius: 4px;
    width: 100px;
    background-color: antiquewhite;

}

#usernameMsg,
#userPwdMsg {
    color: gold;
}

.buttonContainer {
    text-align: center;
}
</style>
